<template>
    <main class="blog_detail p-6 grid grid-cols-10 box-border gap-4">
        <!-- 博客内容块区域 -->
        <section class="blog_detail_content col-span-8">
            <!-- 文章内容 -->
            <el-card class="h-1/2 relative">
                <!-- 定义顶部标题 -->
                <section class="blog_detail_content_title p-3 ">
                    <h1 class="font-bold text-lg">美团弹性伸缩系统的技术演讲与落地实践</h1>
                    <!-- 头部按钮区 -->
                    <section class="rounded-lg bg-gray-200 w-full h-24 mt-3 grid grid-cols-10">
                        <section class="col-span-1 h-full w-full flex justify-center  items-center content-center">
                            <img src="../../assets/fpa_logo_compressed.png" class="w-16 h-16" alt="自由编程协会">
                        </section>
                        <section class="col-span-8 flex flex-col justify-around">
                            <section class="flex flex-row gap-5">
                                <span class="font-bold">美团技术团队</span>
                                <span>2021-04-01 19:59</span>
                                <section class="flex justify-center items-center content-center">
                                    <el-icon>
                                        <Dish />
                                    </el-icon>23432
                                </section>
                                <section class="flex justify-center items-center content-center">
                                    <el-icon>
                                        <Dish />
                                    </el-icon>23432
                                </section>
                            </section>
                            <section>
                                <span class="mr-5">关键词:</span>
                                <el-button type="primary" plain size="small">deepin</el-button>
                                <el-button type="primary" plain size="small">编程</el-button>
                                <el-button type="primary" plain size="small">分布式</el-button>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 定义中间博客内容 -->
                <section class="blog_detail_content_content"></section>
                <!-- 定义博客底部按钮 -->
                <section
                    class="blog_detail_content_bottom absolute bottom-0 left-0 h-16 w-full flex flex-row items-center bg-blue-200 gap-4">
                    <section class="ml-4 flex justify-center items-center content-center">
                        <el-icon>
                            <Dish />
                        </el-icon>踩
                        234</section>
                    <section class="flex justify-center items-center content-center">
                        <el-icon>
                            <Dish />
                        </el-icon>踩
                    </section>
                    <section class="flex justify-center items-center content-center">
                        <el-icon>
                            <Dish />
                        </el-icon>评论
                    </section>
                    <section class="flex justify-center items-center content-center">
                        <el-icon>
                            <Dish />
                        </el-icon>分享
                    </section>
                    <section class="flex justify-center items-center content-center">
                        <el-icon>
                            <Dish />
                        </el-icon>收藏
                    </section>
                    <section class="flex justify-center items-center content-center">
                        <el-button type="danger" size="small" round>关注</el-button>
                        <el-button type="warning" size="small" round>三连</el-button>
                    </section>
                    
                </section>
            </el-card>
            <!-- 相关推荐 -->
            <el-card class="min-h-1/3 mt-4">
                <template #header>
                    <section class="font-bold">
                        博客评论
                    </section>
                </template>
                <!-- 评论主体开始 -->
            </el-card>
            <!-- 相关推荐 -->
            <el-card class="min-h-1/3 mt-4">
                <template #header>
                    <section class="font-bold">
                        相关推荐
                    </section>
                </template>
                <!-- 推荐主体开始 -->
                <section v-for="(item,index) in 4" :key="index" class="flex flex-col w-full h-16mb-3">
                    <section class="flex flex-row justify-between items-center content-center">
                        <span class="font-bold">美团图数据库平台建设以及业务实践</span>
                        <section class="flex justify-center items-center content-center">
                            <el-icon><Dish /></el-icon>
                            23424
                        </section>
                    </section>
                    <section class="break-all mt-1 mb-1">
                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    </section>
                </section>
            </el-card>
        </section>
        <!-- 侧边栏区域 -->
        <sidebar class="blog_detail_sidebar col-span-2">
            <el-card class="h-full"></el-card>
        </sidebar>
    </main>
</template>
<script lang="ts" setup>
import {
    Dish,
    Plus
} from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.blog_detail {
    min-height: 50rem;

    &_content {
        min-height: 50rem;
    }

    &_sidebar {
        min-height: 50rem;
    }
}
</style>